<template>
  <view v-if="show" class="u-modal_box">
    <u-modal v-model="showApplyType" :title="`邀请你成为TA的帮卖`" :show-confirm-button="false" >
      <view class="slot-content">
        <view class="tc fz-14" style="color: #969799;margin-bottom: 32rpx;">
          <text style="max-width:250rpx;display:inline-block;vertical-align: bottom;" class="ov1">{{othersInfoData.communityName || ''}}</text>
          邀请你成为TA的帮卖，货源超多、笔记超赞，一键帮卖、轻松赚钱！</view>
        <view v-if="othersInfoData.communityName && othersInfoData.communityLogo" class="u-flex justify-center" style="background: #F7F8FA;border-radius: 8px;padding: 24rpx 0;">
          <image :src="othersInfoData.communityLogo" mode="aspectFill" style="width:80rpx;height:80rpx;border-radius: 50%;" />
          <view class="u-p-l-20 fz-14 fw5 ov1" style="max-width:270rpx;">{{othersInfoData.communityName}}</view>
        </view>
        <view class="couBtn fz-14 u-m-t-32" @click="applyConfirmFn(true)">立即加入</view>
        <u-icon name="close" size="24" class="closeIcon" @click="cancelFn" />

        <!-- <div class="textarea_msg">
          <textarea class="textarea_box" v-model.trim="applyRemark" placeholder-class="place_holder" maxlength="100" placeholder="填写申请说明"></textarea>
          <span class="textarea_mun">{{applyRemark.length || 0}}/100</span>
        </div> -->
      </view>
    </u-modal>
    <u-modal v-model="showTipsType" :showCancelButton="false" confirm-text="好的" @confirm="cancelFn" confirmColor="#E44435" title="申请已提交" >
      <view class="slot-content">
        <div class="tips_msg">请耐心等待团长审核哦～</div>
      </view>
    </u-modal>

    <u-modal v-model="applySuccess" title="恭喜成功帮卖" :show-confirm-button="false">
      <template slot="default">
        <view class="slot-content">
          <view class="tc fz-14" style="color: #969799;margin-bottom: 32rpx;">
            恭喜您已经成为[
            <text style="max-width:250rpx;display:inline-block;vertical-align: bottom;" class="ov1">{{othersInfoData.communityName||'TA'}}</text>
            ]的帮卖，赶快前往帮卖吧！</view>
          <view v-if="othersInfoData.communityName && othersInfoData.communityLogo" class="u-flex justify-center" style="background: #F7F8FA;border-radius: 8px;padding: 24rpx 0;">
            <image :src="othersInfoData.communityLogo" mode="aspectFill" style="width:80rpx;height:80rpx;border-radius: 50%;" />
            <view class="u-p-l-20 fz-14 fw5 ov1" style="max-width:270rpx;">{{othersInfoData.communityName}}</view>
          </view>
          <view class="couBtn fz-14 u-m-t-32" @click="cancelFn2">立即去帮卖</view>
          <u-icon name="close" size="24" class="closeIcon" @click="cancelFn2" />
        </view>
      </template>
    </u-modal>
  </view>
</template>
<script>
import helpSellGroups from "@/api/helpSellGroups.js"
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    othersInfoData: {
      type: Object,
      default: {},
    },
    getRelationType: {
      type: Number||String,
      default: 0,
    },
    // isBonus: {
    //   type: Boolean,
    //   default: false
    // }
    // routeData: {
    //   type: Object,
    //   default: {},
    // }
  },
  created () {
    // isHelpSellExamine 是否开启帮卖审核0不开启1开启
    if (this.othersInfoData && this.othersInfoData.isHelpSellExamine == 1) {
      // 开启帮卖审核--走原来申请逻辑
      if (this.getRelationType == 1)  {
        this.showApplyType = false
        this.showTipsType = true
      } else {
        this.showApplyType = true
        this.showTipsType = false
      }
    } else {
      // 不开启时走自动申请
      // console.log(this.othersInfoData)
      // this.applySuccess = true
      this.applyConfirmFn(false)
    }
  },
  data () {
    return {
      showApplyType: false,
      showTipsType: false,
      applyRemark: '让我一起加入吧',
      applySuccess: false, // 是否直接通过
    }
  },
  methods: {
    cancelFn () {
      this.$emit('cancelFn')
    },
    // flag-->true点击按钮申请(手动申请)、false自动申请
    applyConfirmFn (flag) {
      if (flag) this.showApplyType = true
      let params = {
        applyRemark: this.applyRemark,
        idCode: this.othersInfoData.idCode,
      }
      // 推荐人code
      if (this.othersInfoData.recommendCode) {
        params.recommendCode = this.othersInfoData.recommendCode
      }
      helpSellGroups.applyBeHead(params).then(({ data }) => {
        if (flag) this.showApplyType = false
        if(data && data.relation === 2){
          // 直接通过
          this.applySuccess = true
        } else { // 审核中
          this.showTipsType = true
        }
      }).catch(() => {
        // 修复后端返回code不为200时，show为true，页面被u-modal_box盖住bug
        this.cancelFn()
      })
    },
    // 直接通过，刷新页面
    cancelFn2(){
      this.cancelFn()
      this.applySuccess = false
      // query
      const { routes } = this.getRoute()
      // routes[0].onLoad(query) // 此刷新方法不会重置data里的数据
      // routes[0].onShow()
      uni.redirectTo({url: routes[0].$page.fullPath})
    }
  },
}
</script>
<style lang="scss" scoped>
.u-modal_box {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  .couBtn{
    width: 524rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    color: #fff;
    background: #E44435;
    border-radius: 40rpx;
  }
  
  .slot-content{
    position: relative;
    .closeIcon{
      position: absolute;
      padding: 20rpx;
      top: -90rpx;
      right: 0;
      color: $n6Color;
    }
  }
}
</style>